<template>
  <el-form class="UserInformation" label-position="top">
    <el-form-item label="店铺名称">
      <el-input v-model="userInfo.userName" class="inputStyle" clearable placeholder="请输入店铺名称" />
    </el-form-item>
    <el-form-item label="店铺简介">
      <el-input v-model="userInfo.descText" type="textarea" :autosize="{ minRows: 2 }" class="inputStyle" clearable placeholder="请输入店铺简介" />
    </el-form-item>
    <el-form-item label="店铺联系人">
      <el-input v-model="userInfo.addressName" class="inputStyle" clearable placeholder="请输入店铺简介" />
    </el-form-item>
    <el-form-item label="店铺地址">
      <el-cascader
        v-model="address"
        :options="options"
        :separator="' '"
        filterable
        :props="{ expandTrigger: 'hover' }"
        placeholder="请选择省市区"
        class="inputStyle"
        @change="addressCallback"
      />
      <el-input v-model="userInfo.addressDetail" type="textarea" :autosize="{ minRows: 2 }" class="inputStyle mt10" style="display: block;" clearable placeholder="请输入详情街道地址" />
    </el-form-item>
    <Cbutton type="pink" size="small" @click.native="submitForm">更 新</Cbutton>
  </el-form>
</template>
<script>
import options from '@/utils/country-data'
import {
  userModify
} from '@/api/user'
export default {
  name: 'UserInformation',
  data() {
    return {
      options: options,
      userInfo: this.$store.state.user.userInfo
    }
  },
  computed: {
    address: {
      get() {
        return [this.userInfo.province || '', this.userInfo.city || '', this.userInfo.county || '']
      },
      set(val) {
        this.userInfo.province = val[0]
        this.userInfo.city = val[1]
        this.userInfo.county = val[2]
      }
    }
  },
  methods: {
    // 更新表单
    async submitForm() {
      const res = await userModify({
        userName: this.userInfo.userName,
        descText: this.userInfo.descText,
        addressName: this.userInfo.addressName,
        province: this.userInfo.province,
        city: this.userInfo.city,
        county: this.userInfo.county,
        addressDetail: this.userInfo.addressDetail
      })
      if (res.code === 0) {
        this.$store.dispatch('user/getInfo')
        this.$message.success('更新成功')
      }
    },
    // 选择省市区回调
    addressCallback(value) {
      console.log(value, 'value')
    }
  }
}
</script>
<style lang="scss">
.inputStyle{
  width: 400px;
  max-width: 100%;
}
</style>
